<template>
  <div class="FooterMusicBig">

<Transition>
    <mini-play-list v-show="showMiniPlayList"></mini-play-list>
</Transition>

    <div class="blurbg" ref="blurbg" :style="backImgStyle"></div>

    <div class="bigplayerHeader">
      <div class="left" @click="close1">
        <svg aria-hidden="true">
          <use xlink:href="#icon-xiajiantou"></use>
        </svg>
      </div>
      <div class="middleinfo">
        <div class="middleinfoSongName">
          <!-- <h3>{{ musicList.name }}</h3> -->
          <h3 :class="{ scrollable: CanIscroll }">
            {{ musicList.name }}
          </h3>
          <!-- <h3 class="scrollable">asassasassasasas</h3> -->
        </div>
        <div class="middleinfoSingername">
          <span v-for="ar in musicList.ar" :key="ar.id">{{ ar.name }}</span>
          <span class="flow">关注</span>
        </div>
      </div>
      <div class="right">
        <svg aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
    </div>

    <!-- 中间旋转cd部分 -->
    <div
      class="cdPannel"
      v-show="!isLyricShow"
      @click="isLyricShow = !isLyricShow"
    >
      <div class="middleCd">
        <img
          src="../../assets/styli22.png"
          alt=""
          :class="{ styli: isPlaying, 'styli styli_play': !isPlaying }"
        />
        <div class="cdcover" ref="cdcover">
          <img :src="musicList.al.picUrl" alt="" />
        </div>
      </div>
    </div>

    <!-- 歌词显示部分 -->
    <div
      class="lyricPannel"
      v-show="isLyricShow"
      @click="isLyricShow = !isLyricShow"
    >
      <div class="fadein"></div>
      <div class="lyricList" ref="lyricList">
        <!-- {{ lyric }} -->
        <!-- 这里有一个坑，页面上进行渲染时，但时此时这个数组里没有对象，更没有对象的属性，故页面虽然能在获取到数据后正常展示，但是在此之前控制台会先报错。 -->
        <!-- 解决办法，在未得到的对象属性前加上？符号如：{{user?.name}} -->
        <p
          v-for="item in lyrics"
          :key="item"
          :class="{
            active:
              currentTime * 1000 <= item.next &&
              currentTime * 1000 >= item.time,
          }"
        >
          {{ item?.lrc }}
        </p>
      </div>

      <div class="fadeout"></div>
    </div>

    <div class="bigplayerBottom">
      <div class="optionPanel">
        <a href="">
          <svg aria-hidden="true">
            <use xlink:href="#icon-aixin"></use>
          </svg>
        </a>
        <a href="">
          <svg aria-hidden="true">
            <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
          </svg>
        </a>

        <a href="">
          <svg aria-hidden="true">
            <use xlink:href="#icon-huatong"></use>
          </svg>
        </a>

        <a href="" class="comment">
          <!-- <span class="commentCount">12</span> -->

          <!-- <svg aria-hidden="true">
          <use xlink:href="#icon-pinglun"></use>
        </svg> -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="128px"
            height="128px"
          >
            <image
              x="0px"
              y="0px"
              width="0.4rem"
              height="0.4rem"
              xlink:href="data:img/png;base64,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"
            />
          </svg>
        </a>

        <a href="" style="transform: scale(1.2)">
          <svg aria-hidden="true">
            <use xlink:href="#icon-gengduo-shuxiang"></use>
          </svg>
        </a>
      </div>
      <div class="prograssBar">
        <span ref="currentTime">{{ formaterDuration(currentTime) }}</span>

        <van-slider
          v-model="pgValue"
          bar-height="2px"
          active-color="#b7b7b7"
          inactive-color="#5e5e5e"
          button-size="9px"
        />
        <span ref="durationTime">{{ formaterDuration(duration) }}</span>
        <!-- <span ref="durationTime">{{pgValue}}</span> -->
      </div>
      <div class="controlPanel">
        <div class="modelBtn">
          <svg aria-hidden="true">
            <use xlink:href="#icon-xunhuan"></use>
          </svg>
        </div>
        <div class="prevSong" @click="playprevSong">
          <svg aria-hidden="true">
            <use xlink:href="#icon-shangyishoushangyige"></use>
          </svg>
        </div>
        <div class="playPause" @click="playPause">
          <svg aria-hidden="true" class="playIcon" v-show="!isPlaying">
            <use xlink:href="#icon-bofang"></use>
          </svg>

          <svg aria-hidden="true" class="playIcon" v-show="isPlaying">
            <use xlink:href="#icon-zanting"></use>
          </svg>
        </div>
        <div class="nextSong" @click="playnextSong">
          <svg aria-hidden="true">
            <use xlink:href="#icon-xiayigexiayishou"></use>
          </svg>
        </div>
        <div class="songList" @click="updateShowMiniPlayList(true)">
          <svg aria-hidden="true">
            <use xlink:href="#icon-31liebiao"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import MiniPlayList from "@/components/player/MiniPlayList.vue";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      isLyricShow: false,
    };
  },
  components:{
    MiniPlayList
  },
  props: ["musicList", "isPlaying", "playPause"],
  computed: {
    pgValue() {
      return (this.currentTime / this.duration) * 100;
    },
    ...mapState(["showBigPlayer", "lyricList", "currentTime", "duration","showMiniPlayList"]),
    lyrics() {
      let arr;
      if (this.lyricList.lyric) {
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          if (item.length != 0) {
            let min = item.slice(1, 3);
            let second = item.slice(4, 6);
            let mill = item.slice(7, 10).replace("]", "").padStart(3, "0");
            let time =
              parseInt(min) * 60 * 1000 +
              parseInt(second) * 1000 +
              parseInt(mill);

            let lrc = item.split("]")[1];
            // console.log(min, second, "--"+mill+"---", lrc);
            return {
              time,
              lrc,
            };
          }
        });

        let arr2 = arr.filter((item) => item != undefined);

        arr2.forEach((item, i) => {
          if (i == arr2.length - 1) {
            item.next = 0;
          } else {
            item.next = arr2[i + 1].time;
          }
        });

        // console.log(arr2);
        return arr2;
      }
    },

    backImgStyle() {
      return {
        backgroundImage: "url(" + this.musicList.al.picUrl + ")",
      };
    },
    CanIscroll() {
      if (this.musicList.name.length > 20) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    ...mapMutations([
      "updatePlayStatus",
      "updateShowBigPlayer",
      "playnextSong",
      "playprevSong",
      "updateCurrentTime",
      "updateShowMiniPlayList"
    ]),
    formaterDuration(value) {
      let sec = value % 60;
      sec = Math.trunc(sec).toString().padStart(2, "0");
      // console.log("sec is ", sec);
      let min = value / 60;
      if (min < 0) {
        min = "00";
      } else {
        min = Math.trunc(min).toString().padStart(2, "0");
      }
      // console.log(min + sec);
      let formater_uration = min + ":" + sec;
      return formater_uration;
    },
    close1() {
      this.updateShowBigPlayer(false);
      this.isLyricShow = false;
    },
  },
  watch: {
    isPlaying: function () {
      if (this.isPlaying) {
        this.$refs.cdcover.style.animationPlayState = "running";
      } else {
        this.$refs.cdcover.style.animationPlayState = "paused";
      }
    },
    currentTime() {
      if (this.currentTime == this.duration) {
        this.playnextSong();
        this.$refs.lyricList.scrollTop = 0;
      }

      let p = document.querySelector("p.active");
      // 查看p的引用信息
      // console.log(p.offsetTop);
      if (p && p.offsetTop > 250) {
        this.$refs.lyricList.scrollTop = p.offsetTop - 220;
      }
    },
  },
  mounted() {
    // console.log(this.musicList);
    if (this.isPlaying) {
      this.$refs.cdcover.style.animationPlayState = "running";
    }
  },
};
</script>

<style lang="less" scoped>

  /* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: all 0.2s ease;
}

.v-enter-from,
.v-leave-to {
    bottom: -1000px;
    opacity: 0;
}
.FooterMusicBig {
  position: fixed;
  width: 100%;
  background-color: rgba(1, 1, 1, 0.6);
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  //   border-radius: 0.4rem;
  transition: height 0.1s;
  overflow: hidden;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(1, 1, 1, 0.2);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .bigplayerHeader {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.2rem;
    position: relative;
    transform: translateY(10%);
    z-index: 18;
    .left,
    .right {
      svg {
        width: 0.5rem;
        height: 0.5rem;
        fill: #fff;
      }
    }
    .middleinfo {
      width: 80%;
      text-align: center;

      .middleinfoSongName {
        overflow: hidden;
        transform: translateY(10%);
        h3 {
          color: rgb(255, 255, 255);
          font-weight: 400;
          font-size: 0.3rem;
          text-align: center;
          transition: all 2s;
        }
        .scrollable {
          transition: all 2s;
          white-space: nowrap;
          text-align: right;
          animation: scollToleft 20s linear infinite;
        }
      }

      .middleinfoSingername {
        span {
          font-size: 0.2rem;
          color: rgb(191, 191, 191);
          margin-right: 0.04rem;
        }
        .flow {
          // font-size: .05rem;
          border: 1px solid rgb(191, 191, 191);
          padding: 0 0.05rem;
          border-radius: 0.1rem;
        }
      }
    }
  }

  .cdPannel {
    width: 100%;
    height: 70%;
    position: relative;
    z-index: 8;
    display: flex;
    justify-content: center;
    align-items: center;
    .middleCd {
      position: relative;
      transform: translateY(10%);
      .styli {
        width: 5rem;
        height: 5rem;
        position: absolute;
        top: -90%;
        z-index: 8;
        transform: scale(1.5) rotate(0deg);
        transition: all 2s;
      }
      .styli_play {
        transform: scale(1.5) rotate(-30deg);
        transition: all 2s;
      }

      .cdcover {
        width: 5rem;
        height: 5rem;
        background: url("../../assets/cdcover.png");
        background-size: 5rem 5rem;
        position: relative;
        border-radius: 50%;
        top: 0;
        left: 0;

        box-shadow: 0 0 0 0.2rem rgba(116, 116, 116, 0.3);

        animation: cdroate 20s linear infinite;
        // 这里是手动和来添加样式来控制是否转转动，也可以直接写两套样式。来通过切换类名实现动画效果。
        animation-play-state: paused;

        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 3.4rem;
          height: 3.4rem;
          transition: all 0.2s;
          border-radius: 50%;
        }
      }
    }
  }

  .lyricPannel {
    width: 100%;
    height: 70%;
    position: relative;

    z-index: 8;

    .lyricList {
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: scroll;
      scroll-behavior: smooth;
      height: 100%;
      transition: scroll 1s linear;
      margin: 0.2rem 0;
      p {
        color: rgb(164, 164, 164);
        margin-bottom: 0.4rem;
        text-align: center;
        padding: 0 0.4rem;
      }
      .active {
        color: #fff;
      }
    }

    // .fadeout,
    // .fadein {
    //   width: 100%;
    //   height: 50px;
    //   background: linear-gradient( to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
    //   // background-color: gray;
    //   position: absolute;
    // }
    // .fadein {
    //   top: 0;
    // }

    // .fadeout {
    //   bottom: 0;
    // }
  }
  .lyricList::-webkit-scrollbar {
    width: 0 !important;
  }

  .bigplayerBottom {
    width: 100%;
    text-align: center;
    height: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 0.2rem;
    .optionPanel {
      display: flex;
      justify-content: space-around;

      position: relative;
      z-index: 8;
      a {
        text-decoration: none;
        svg {
          width: 0.5rem;
          height: 0.5rem;
          fill: #fff;
        }
      }

      .comment {
        position: relative;
        .commentCount {
          position: absolute;
          top: -10%;
          right: -10%;
          font-size: 0.15rem;
          color: #fff;

          font-weight: 500;
        }
      }
    }

    .prograssBar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      z-index: 8;
      span {
        color: #b7b7b7;
        font-size: 0.2rem;
        // padding: 0 0.5rem;
        width: 10%;
        margin: 0 0.1rem;
      }
      van-slider {
        width: 80%;
      }
    }

    .controlPanel {
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: relative;
      z-index: 8;

      svg {
        width: 0.6rem;
        height: 0.6rem;
        fill: #fff;
      }
      .playIcon {
        width: 1rem;
        height: 1rem;
      }
    }
  }

  .blurbg {
    width: 100%;
    height: 100%;
    top: 0;
    // background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F041914135038%2F140419135038-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663311147&t=1cbaca1a0206273a6917f286295521f7");
    position: absolute;
    z-index: 3;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0 0;
    animation: bgmove 60s linear infinite;
    filter: blur(30px) brightness(50%);
    transform: scale(200%);
  }
}

@keyframes cdroate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bgmove {
  0% {
    background-position: 25% 0%;
  }
  25% {
    background-position: 50% 0%;
  }
  50% {
    background-positon: 75% 0%;
  }
  100% {
    background-positon: 100% 0%;
  }
}

@keyframes scollToleft {
  0% {
    transform: translateX(80%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>